<template>
  <div class="video-monitor">
    <div class="column">
      <!-- 树结构 -->
      <div class="tree-list">
        <!-- 县 -->
        <div v-for="(item,index) in other.cityList" :key="index">
          <div class="flex-row cur">
            <i class="el-icon-caret-right"></i>
            <span>{{item.label}}</span>
          </div>
          <div v-if="item.child" class="son">
            <!-- 镇 -->
            <div v-for="(itm, ind) in item.child" :key="ind">
              <div class="flex-row">
                <div class="line"></div>
                <span>{{itm.label}}</span>
              </div>
              <div v-if="itm.child" class="son" style="margin: 8px 0 0 20px">
                <!-- 村 -->
                <div v-for="(i, d) in itm.child" :key="d">
                  <div class="flex-row">
                    <div class="line"></div>
                    <span>{{i.label}}</span>
                  </div>
                  <div v-if="i.child" class="son" style="margin: 8px 0 0 24px">
                    <!-- 摄像头 -->
                    <div v-for="(q, t) in i.child" :key="t" class="flex-row">
                      <div class="spot"></div>
                      <span>{{q.label}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// export default {
//   name: "VideoMonitor",
//   data() {
//     return {
//       other: {
//         cityList: [
//           {id:1, label: '肥东县', child: [
//             {id:'1-1', label: '店埠镇', child: [
//               {id: '1-1-1', label: '仰桥村'},
//               {id: '1-1-2', label: '仰桥村', child: [
//                 {id: '1-1-1-1', label: '45-村委会1号摄像头'},
//                 {id: '1-1-1-2', label: '45-村委会1号摄像头'}
//               ]}]},
//             {id:'1-2', label: '店埠镇'},
//             {id:'1-3', label: '店埠镇'}
//           ]},
//         ]
//       }
//     }
//   }
// }
</script>
<style scoped lang="scss">
.video-monitor {
  display: flex;
  height: 100%;
  /* 树形结构 */
  .tree-list {
    padding: 38px 10px 0 22px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    .son {
      margin-left: 8px;
      border-left: 1px solid #cccccc;
      .flex-row {
        padding: 16px 0 0;
        transform: translateY(9px);
      }
      .spot {
        width: 5px;
        height: 5px;
        background-color: #cccccc;
        border-radius: 50%;
      }
      .line {
        width: 15px;
        height: 1px;
        margin-right: 4px;
        background-color: #cccccc;
      }
    }
  }
  /* 公用样式 */
  .column {
    width: 300px;
    height: 100%;
    background-color: #fff;
  }
  .flex-row {
    display: flex;
    align-items: center;
  }
  .flex-jus {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cur {
    cursor: pointer;
  }
}
</style>
